<template>
    <a-button class="breathe">边缘发光的呼吸灯</a-button>
    <br><br>
    <a-button class="breathe-batter">整体发光的呼吸灯</a-button>
    <br><br>
    <a-button class="play-state">动画的播放状态控制</a-button>
    <br><br>
    <a-button class="particoloured">五彩斑斓的按钮</a-button>

</template>
<script setup>

</script>
<style lang="less" scoped>
.breathe {
    box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5);
    animation: breathe linear infinite alternate 1s;
}

/* 这个就是标准的呼吸效果 */
@keyframes breathe {
    form {
        box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5);
    }

    to {
        box-shadow: 0px 0px 0px rgba(255, 0, 0, 0.5);
    }
}


.breathe-batter {
    position: relative;

    /* 用伪类做背景，不会破坏原始Html结构(就是说不用加额外的 div 用来画动画) */
    &::before {
        /* 伪类 必须有 content 才会显示出来(最开始 伪类 是用来为 div 添加额外字符的) */
        content: '';
        display: block;
        width: 100%;
        left: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 1;
        z-index: -1;
        background-color: rgba(255, 0, 0, 0.5);
        box-shadow: 0px 0px 20px rgba(255, 0, 0);
        animation: breathe-fade linear infinite alternate 1s;
    }
}

@keyframes breathe-fade {
    form {
        opacity: 1;
        box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5);
    }

    to {
        opacity: 0;
        box-shadow: 0px 0px 0px rgba(255, 0, 0, 0.5);
    }
}


.play-state {
    position: relative;

    /* 用伪类做背景，不会破坏原始Html结构(就是说不用加额外的 div 用来画动画) */
    &::before {
        /* 伪类 必须有 content 才会显示出来(最开始 伪类 是用来为 div 添加额外字符的) */
        content: '';
        display: block;
        width: 0%;
        left: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 1;
        z-index: -1;
        background-color: rgba(255, 0, 0, 0.5);
        animation: play-state linear infinite alternate 1s;
    }

    &:hover::before {
        animation-play-state: paused !important;
        -webkit-animation-play-state: paused !important;
    }

}

@keyframes play-state {
    form {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.particoloured {
    background-color: rgba(255, 0, 0, 0.5);
    animation: particoloured linear infinite alternate 2s;
}

@keyframes particoloured {
    0% {
        background-color: rgba(255, 0, 0, 0.5);
    }

    20% {
        background-color: rgba(255, 255, 255, 0.5);
    }

    40% {
        background-color: rgba(255, 255, 0, 0.5);
    }

    60% {
        background-color: rgba(255, 0, 255, 0.5);
    }

    80% {
        background-color: rgba(0, 0, 255, 0.5);
    }

    100% {
        background-color: rgba(0, 255, 0, 0.5);
    }
}
</style>